<template>
    <div class="balancec_main">
        <div class="nav-bar">
            <div class="bottom">
                <span>
                    <van-icon @click="$router.push('/replace/mybalance')" class="go-back" name="arrow-left" />
                </span>
                <span>提现</span>
            </div>
        </div>
        <div class="user_withdraw">
            <div>
                <span class="plzsend">请输入提现金额</span>
                <van-icon  class="add_blance"  @click="showAdd" name="plus" />
            </div>
            <div class="sendinput">
                ￥<input type="text" class="def" :placeholder="'可提现余额NAN元'" v-model="money">
            </div>
            <div class="seluser" v-for="(item,index) in payList" :key="index">
                <span class="outside" @click="selTxAccount(item,index)"><span :class="['inside',checkIndex==index?'ischcek':'']"></span></span>
                <span class="usermsg shou" @click="selTxAccount(item,index)">
                    {{item.account_type==1?'支付宝':'银行卡' + `账户`}}
                    {{item.account | num}}
                    {{`(${item.account_name})`}}
                </span>
                <span class="default" v-if="item.is_default==1">默认</span>
                <van-icon @click="$router.push('/replace/withaccount')" name="arrow" class="rightjiantou shou" />
            </div>
            <div class="rule">
                首次提现金额为20元，最小单次提现金额为200元，每月可提现2次（提现金额均为税前金额）
            </div>
        </div>
        <div class="balance_btn" @click="withdraw" style="background:#ddd">
            提现
        </div>
        <!-- 添加账户 -->
        <el-dialog
            title="添加账户"
            style="text-align: center;"
            :visible.sync="addBalance"
            width="35%"
            :show-close="true"
            :close-on-press-escape="true"
            :close-on-click-modal="true"
            @close="addBalance=false"
        >

            <el-form label-width="100px">
                <el-form-item label="账户">
                    <el-select v-model="payType" style="float:left;width:150px">
                        <el-option
                        v-for="item in options"
                        size='mini'
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名" v-if="payType == '1'">
                    <el-input v-model="yhkName" readonly :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="账号" v-if="payType == '1'">
                    <el-input v-model="zfbNum" placeholder="请输入支付宝账号"></el-input>
                </el-form-item>
                <el-form-item label="开户人姓名" v-if="payType == '2'" :disabled="true">
                    <el-input v-model="yhkName" readonly></el-input>
                </el-form-item>
                <el-form-item label="银行卡号" v-if="payType == '2'">
                    <el-input v-model="yhkNum" placeholder="请输入银行卡号"></el-input>
                </el-form-item>
                <el-form-item label="开户行" v-if="payType == '2'">
                    <el-input v-model="yhkKhh" placeholder="请输入开户行"></el-input>
                </el-form-item>
                <div class="is_default">
                    设置为默认账户:
                    <van-switch class="check_def" v-model="isDefault" active-color="#07c160" inactive-color="#ccc" size="16px" />
                </div>
            </el-form>


            <!-- <div class="zfbnum">
                <span class='zhanghu'>账户</span>
                <span @click="showPopup">{{payType==1?'支付宝':'银行卡'}}</span>
                <el-select v-model="payType" style="float:left;width:150px">
                    <el-option
                    v-for="item in options"
                    size='mini'
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="subzfb" v-if="payType == '1'">
                <van-field :value="yhkName" readonly label="用户名" />
                <van-field class="van-field-isRequired" v-model="zfbNum" type="digit" placeholder="请输入支付宝账号" label="账号" />
            </div>
            <div class="subzfb" v-if="payType == '2'">
                <van-field :value="yhkName" readonly label="开户人姓名"/>
                <van-field class="van-field-isRequired" v-model="yhkNum" type="digit" placeholder="请输入银行卡号" label="卡号"/>
                <van-field class="van-field-isRequired" v-model="yhkKhh" placeholder="请输入开户行" label="开户行" />
            </div>
            <div class="is_default">
                设置为默认账户:
                <van-switch class="check_def" v-model="isDefault" active-color="#07c160" inactive-color="#ccc" size="16px" />
            </div> -->

            <!-- <div class="isread">
                <input type="checkbox" v-model="ischecked">
                <span>
                    我已阅读且同意相关
                    <a>《服务条款》</a>
                    和
                    <a>《隐私政策》</a>
                </span>
            </div> -->
            <button class="trueadd_btn" @click="trueAdd">
                确定
            </button>
        </el-dialog>
    </div>
</template>
<script>
import {getWithdrawal,appliWithdrawal,addWithdrawal} from '@/api/withdrawal'
import {Toast} from 'vant'
import {bankCard,aliAccout} from "@/utils/validate.js";
export default {
    data(){
        return {
            Flag:false,
            addBalance:false,
            checkIndex:0,
            payList:[],
            selData:{},
            money:"",
            options: [{
                value: '1',
                label: '支付宝'
            }, {
                value: '2',
                label: '银行卡'
            }],
            payType: '1',
            ischecked: false,
            show: false,
            columns: ['支付宝', '银行卡'],
            //支付宝账号
            zfbNum: '',
            //银行卡号
            yhkNum: '',
            //开户行
            yhkKhh: '',
            isDefault: false
        }
    },
    computed:{
        coin(){
            return this.$store.state.user.canUserCoin
        },
        yhkName(){
            console.log(this.$store.state.user)
            return this.$store.state.user.name
        }
    },
    methods:{
        showAdd(){
            this.addBalance=true
            this.zfbNum = ''
            this.yhkNum = ''
            this.yhkKhh = ''
        },
        addpay(params) {
            console.log(params)
            addWithdrawal(params).then(res => {
                if (res.code === 200) {
                    this.$message.success('添加成功');
                    this.getAccountList()
                    this.addBalance=false
                } else {
                    this.$message.error('添加失败');
                }
            })
        },
        trueAdd() {
            // if (this.ischecked) {
                if (this.payType == '1') {
                    if (this.zfbNum != '' && this.zfbName != '' && aliAccout(this.zfbNum)) {
                        let params = {
                            account: this.zfbNum,
                            account_name: this.yhkName,
                            account_type: this.payType,
                            is_default: this.isDefault ? 1 : 2
                        }
                        console.log(this.zfbNum)
                        this.addpay(params)
                    } else {
                        switch ('') {
                            case this.zfbNum:
                                this.$message.error('请输入支付宝账号')
                                break;
                            case this.zfbName:
                                this.$message.error('请输入姓名')
                                break;
                            default:
                                this.$message.error('请输入正确的支付宝账号')
                                break;
                        }
                    }
                }
                if (this.payType == '2') {
                    if (this.yhkNum != '' && this.yhkKhh != '' && bankCard(this.yhkNum)) {
                        let params = {
                            account: this.yhkNum,
                            account_name:this.yhkName,
                            sub_branch:this.yhkKhh,
                            account_type: this.payType,
                            is_default: this.isDefault ? 1 : 2
                        }
                        console.log(params)
                        this.addpay(params)
                    } else {
                        switch ('') {
                            case this.yhkNum:
                                this.$message.error('请输入银行卡号');
                                break;
                            case this.yhkKhh:
                                this.$message.error('请输入开户行');
                                break;
                            default:
                                this.$message.error('请输入正确的银行卡号')
                                break;
                        }
                    }
                }
            // } else {
            //     Toast('请先勾选我已阅读且同意相关《服务条款》和《隐私政策》')
            // }
        },
        selTxAccount(item,index){
            this.checkIndex=index
            this.selData = item
        },
        getAccountList(){
            getWithdrawal().then(res=>{
                this.payList = res.data
                this.payList.forEach((item,index)=>{
                    if(item.is_default==1){
                        this.checkIndex = index
                        return
                    }
                })
                this.selData = this.payList[this.checkIndex]
            })
        },
        withdraw(){
            // if (this.payList.length == 0) {
            //     this.$message.error('请先添加提现账户')
            //     return
            // }
            // if (parseInt(this.money)>parseInt(this.coin)) {
            //     this.$message.error('余额不足')
            //     return
            // }
            // if (this.money == "") {
            //     this.$message.error('请输入提现金额')
            //     return
            // }
            // if (this.money <= "0") {
            //     this.$message.error('请输入正确的提现金额！')
            //     return
            // }
            // let params = {
            //     price:this.money,
            //     withdrawal_id:this.selData.id
            // }
            // appliWithdrawal(params).then(res=>{
            //     if (res.code==200) {
            //         this.$store.state.user.canUserCoin-=this.money
            //         this.$message.success('提现申请成功,请等待管理员审核')
            //     }
            // })
             this.$message.error('该功能开发中，暂不开放')
        }
    },
    deactivated() {
        this.$destroy(true); //销毁组件
    },
    created(){
        this.getAccountList()
    },
    filters:{
        num(value){
            return value.slice(0,3) + '****' + value.slice(-3)
        }
    }
}
</script>
<style lang="less" scoped>
.nav-bar{
    z-index: 1 ;
}
.zhanghu{
    display: inline-block;
    width: 86.8px;
    font-size: 14px;
    margin-right: 12px;
    float: left;
    line-height: 40px;
}
.add_main{
    width: 30%;
    margin: auto;
}
.van-cell.van-field {
    padding-left: 0;
    margin-top: 12px;
}
.van-picker-column{
    height: 300px !important;
}
.van-picker{
    height: 100%;
}

.bottom {
    padding: 0 .4rem;
    box-sizing: border-box;
    line-height: 65px;
    height: 65px;
    font-size: 20px;
    z-index: 1;
    text-align: center;
    >span {
        &:nth-child(1) {
            height: 65px;
            float: left;
            text-align: center;
            font-weight: 700;

            i {
                line-height: 1.333333rem;
            }
        }

        &:nth-child(2) {
            text-align: center;
            font-weight: 700;
        }
    }
}


.zfbnum {
    margin-top: 15px;
    padding: 0 12px;

    .rightjiantou {
        float: right;
    }
}

.subzfb {
    padding-left: 12px;
    input {
        display: block;
        margin-top: 30px;
        border: none;
    }
}

.isread {
    margin-top: 17px;
    font-size: 12.5px;
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-weight: 400;
    color: #353535;
    padding-left: 12px;

    input {
        width: 11px;
        height: 11px;
        margin-right: 4.5px;
    }

    a {
        font-weight: 600;
    }
}

.is_default {
    padding-left: 12px;
    margin: 30px 0 40px 0;
    width: 150px;
    .check_def {
        vertical-align: middle;
    }
}

.trueadd_btn {
    width: 50%;
    height: 45px;
    line-height: 45px;
    margin:20px auto 20px;
    font-size: 20px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
    background: #0016FF;
    border-radius: 22.5px;
    text-align: center;
}
// -------------------------------
.balancec_main{
    width: 50%;
    margin: auto;
}
.nav-bar {
    width: 100%;
    background-color: #fff;
    margin-bottom: 20px;
    position: relative;
    .bottom {
        padding: 0 .4rem;
        box-sizing: border-box;
        line-height: 1.333333rem;
        font-size: 20px;
        z-index: 1;
        text-align: center;
        >span {
            &:nth-child(1) {
                height: 1.333333rem;
                float: left;
                text-align: center;
                font-weight: 700;
                i{
                    line-height: 1.333333rem;
                }
            }
            &:nth-child(2) {
                text-align: center;
                font-weight: 700;
            }
        }
    }
}
.user_withdraw{
    padding:0 32.5px 0;
    .plzsend{
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #353535;
    }
    .add_blance{
        float: right;
        margin-right: 5px;
        color: #006CFF;
        vertical-align: middle;
        font-size: 20px;
    }
    .sendinput{
        height: 42px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #353535;
        margin-top: 10px;
        input{
            height: 42px;
            width: 70%;
            font-size: 15px;
            border: none;
            outline: none;
            padding-left: 5px;
        }
    }
    .seluser{
        margin-top: 15px;
        line-height: 21px;
        .outside{
            vertical-align: middle;
            box-sizing: content-box;
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px #006CFF solid;
            margin-right: 10px;
        }
        .inside{
            box-sizing: content-box;
            display: block;
            margin: 4px 4px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }
        .usermsg{
            vertical-align: middle;
            font-size: 14px;
            font-family: PingFang-SC-Regular, PingFang-SC;
            font-weight: 400;
            color: #353535;
        }
        .rightjiantou{
            padding: 0 10px;
            vertical-align: middle;
            float: right;
            color: #979797;
            line-height:21px ;
        }
    }
    
    .ischcek{
        background: #006CFF;
    }
    .default{
        color: #006CFF;
        font-size: 12px;
        font-family: PingFang-SC-Regular, PingFang-SC;
        font-weight: 400;
        margin-left: 10px;
        vertical-align: middle;
    }
    
    .rule{
        margin-top: 28px;
        font-size: 11px;
        font-family: PingFang-SC-Regular, PingFang-SC;
        font-weight: 400;
        color: #0067FF;
    }
}
.balance_btn{
    margin: 50px auto;
    width: 325px;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
    background: #0016FF;
    border-radius: 22.5px;
    text-align: center;
    left: calc(~'50% - 162.5px')
}
</style>